<template name="page-header">
	<view class="uni-column">
		<view class="header">
			<view class="header-left" @tap="back()" v-if="showBack">
				<view class="header-back">{{backText}}</view>
			</view> 
			<view class="header-title">{{title}}</view>  
		</view> 
	</view>
</template>

<script>
	/**
	 * title    : String  导航标题
	 * backText : String  返回文字
	 * showBack : Boolean 是否显示返回按钮
	 */
	export default {
		name: 'page-header',
		props:['title','showBack','backText'],
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
		},
	}
</script>

<style>
	.header-left{
		position: absolute;
		width: 130px;
		height: 70px;
		z-index: 2; 
	}
	.header-back{
		font-size: 34px;
		color: #000;
		text-align: center;
	}
	.header {
		width: 100%;
		height: 140px;
		background-color: #fff;
		position: relative;
		padding-top: 70px;
		padding-left: 25px;
		padding-right: 25px;
		display: flex;
	}
	.header-title{
		position: absolute;
		left: 0;
		top: 70px;
		width: 100%;
		text-align: center;
		font-size: 34px;
		color: #000000;
		font-weight: 700;
	}
	.header-back:after {
		content: '';
		width: .25rem;
		height: .25rem;
		position: absolute;
		top: 50%;
		left: 0rem;
		margin-top: -25px;
		background: transparent;
		border: 1px solid #000000;
		border-top: none;
		border-right: none;
		z-index: 2;
		-webkit-border-radius: 0;
		border-radius: 0;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
</style>
